<template>
  <div>
    <h3>class的使用</h3>
    <div :class="oneClass">样式类可以是字符串</div>
    <div :class="[oneClass, twoClass]">样式类也可以是数组</div>
    <div :class="['arrxClass']">数组形式</div>
    <div :class="{ oneClass: true, twoClass: true }">样式类可以是对象</div>
    <div :class="objCla">对象行星式的样式类</div>
    <p :style="oBg">动态绑定行内样式</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oneClass: 'classOne',
      twoClass: 'classTwo',
      objCla: 'objClass',
      arrCla: {
        fontSize: '20px',
        fontWeight: 'bolid',
        color: 'blue'
      },
      oBg: {
        color: 'red'
      }
    }
  }
}
</script>

<style>
.classOne {
  font-size: 30px;
  color: red;
}
.classTwo {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;
}
.objClass {
  width: 300px;
  height: 100px;
  background: #000;
  color: #fff;
  text-align: center;
}
.arrxClass {
  font-size: 30px;
  color: blue;
  font-weight: bold;
}
</style>
